<template>
	<view class="container" style="padding-bottom: 120rpx;">
		<view style="display: flex;align-items: center;gap: 18rpx;">
			<span style="font-size: 28rpx;">盘点方式</span>
			<uni-data-select
				:clear="false"
				v-model="checkWay"
				:localdata="range"
				@change="change"
			></uni-data-select>
		</view>
		<view v-if="checkWay === 0">
			<u--form ref="queryForm" :model="query">
			  <u-form-item label="" prop="box">
			    <span style="margin-right: 46rpx;">容器码</span>
			    <u--input 
			    	placeholder="请输入/扫描" 
			    	v-model="query.containerCode" 
			    	suffixIcon="scan" 
			    	suffixIconStyle="font-size: 68rpx"
			    	style="flex: 1;"
						@confirm="getMaterialList"
			    >
			    </u--input>
			  </u-form-item>
				<u-form-item label="" prop="box">
				  <span style="margin-right: 46rpx;">料架码</span>
				  <u--input 
				  	placeholder="请输入/扫描" 
				  	v-model="query.rackCode"
						:disabled="true"
				  	style="flex: 1;"
				  >
				  </u--input>
				</u-form-item>
				<u-form-item label="" prop="box">
			    <span style="margin-right: 46rpx;">物料码</span>
			    <u--input 
			    	placeholder="请输入/扫描" 
			    	v-model="query.materialCode"
			    	suffixIcon="scan" 
			    	suffixIconStyle="font-size: 68rpx"
			    	style="flex: 1;"
						@confirm="extraInfo"
			    >
			    </u--input>
			  </u-form-item>
			</u--form>
		</view>
		<!-- 点数 -->
		<view v-else-if="checkWay === 1">
			<u--form ref="queryForm" :model="query">
			  <u-form-item label="" prop="box">
			    <span style="margin-right: 46rpx;">容器码</span>
			    <u--input 
			    	placeholder="请输入/扫描" 
			    	v-model="query.containerCode" 
			    	suffixIcon="scan" 
			    	suffixIconStyle="font-size: 68rpx"
			    	style="flex: 1;"
						@confirm="getMaterialList"
			    >
			    </u--input>
			  </u-form-item>
				<u-form-item label="" prop="box">
				  <span style="margin-right: 46rpx;">料架码</span>
				  <u--input 
				  	placeholder="请输入/扫描" 
				  	v-model="query.rackCode"
						:disabled="true"
				  	style="flex: 1;"
				  >
				  </u--input>
				</u-form-item>
			</u--form>
		</view>
		<!-- 亮灯 -->
		<view v-else-if="checkWay === 2">
			<u--form ref="queryForm" :model="query">
				<u-form-item label="" prop="box">
				  <span style="margin-right: 46rpx;">料架码</span>
				  <u--input 
				  	placeholder="请输入/扫描"
						 suffixIcon="scan"
						 suffixIconStyle="font-size: 68rpx"
				  	v-model="query.rackCode"
				  	style="flex: 1;"
						@confirm="getListByRackCode"
				  >
				  </u--input>
				</u-form-item>
			</u--form>
		</view>
		<!-- 卡片 -->
		<view v-if="checkWay !== 2" style="display: flex;flex-direction: column;gap: 10rpx;">
			<uni-card v-for="(item, index) in materialList" :key="index">
				<view class="checkContainer" style="display: flex;flex-direction: column;gap: 10rpx;">
					<view style="display: flex;">
						<view style="font-weight: 600;">
							<text>物料号：</text>
							<text>{{ item.itemCode }}</text>
						</view>
					</view>
					<view style="display: flex;align-items: center;">
						<view style="flex: 1;align-items: center;display: flex;gap: 5px;">
							<text>库存数量:</text>
							<text>{{ item.inventoryQty}}</text>
						</view>
						<view style="display: flex;align-items: center;flex: 1;gap: 5px;">
							<text>盘点数量:</text>
							<u--input placeholder="请输入" v-model="item.checkingQty"></u--input>
						</view>
					</view>
					<view style="display: flex;align-items: center;">
						<view style="align-items: center;flex: 1;display: flex;gap: 5px;">
							<text>库存盘数:</text>
							<text>{{ item.inventoryCount}}</text>
						</view>
						<view style="display: flex;align-items: center;flex: 1;gap: 5px;">
							<text>盘点盘数:</text>
							<u--input placeholder="请输入" v-model="item.checkingCount" @input="handlerChange(item)"></u--input>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<!-- mode === 2 -->
		<view v-else style="display: flex;flex-direction: column;gap: 10rpx;">
			<uni-card v-for="(item, index) in materialList" :key="index">
				<view class="checkContainer" style="display: flex;flex-direction: column;gap: 10rpx;">
					<view style="display: flex;">
						<view style="font-weight: 600;">
							<text>物料号：</text>
							<text>{{ item.itemCode }}</text>
						</view>
					</view>
					<view style="display: flex;align-items: center;">
						<view style="flex: 1;align-items: center;">
							<text>库存数量:</text>
							<text>{{ item.inventoryQty}}</text>
						</view>
						<view style="align-items: center;flex: 1;">
							<text>库存盘数:</text>
							<text>{{ item.inventoryCount}}</text>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<!-- 提示组件 -->
		<u-toast ref="uToast"></u-toast>
		<view v-if="checkWay === 0" class="commonButton">
		  <u-button type="warning" @click="reset">重置</u-button>
		  <u-button type="primary" :disabled="materialList.length === 0" @click="scanSubmit">盘点完成</u-button>
		</view>
		<view v-else-if="checkWay === 1" class="commonButton">
		  <u-button type="warning" @click="reset">重置</u-button>
		  <u-button type="primary" :disabled="materialList.length === 0" @click="scanSubmit">盘点完成</u-button>
		</view>
		<view v-else class="commonButton">
		  <u-button type="primary" @click="lightSubmit">盘点完成</u-button>
		</view>
	</view>
</template>

<script>
	import { queryMaterialListAPI, checkByContainerAPI, checkByMaxboxAPI } from '@/api/work/storage'
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	import uniDataSelect from '../../../node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue'
	export default {
		components: {
			uniDataSelect,
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				query: {
					containerCode: '',
					rackCode: '',
					materialCode: ''
				},
				checkWay: 0,
				range: [
					{ value: 0, text: "扫码" },
					{ value: 1, text: "点数" },
					{ value: 2, text: "亮灯" }
				],
				materialList: [''],
				scanMaterial: {},
				checkingCode: ''
			};
		},
		methods: {
			change(e) {
				this.query = {
					containerCode: '',
					rackCode: '',
					materialCode: ''
				}
				this.materialList = []
				this.scanMaterial = []
			},
			handlerChange(value) {
				console.log(value)
				if (Number(value.checkingCount) === value.inventoryCount) {
					const index = this.materialList.findIndex(item => item.itemCode === value.itemCode)
					this.materialList[index].checkingQty = this.materialList[index].inventoryQty
				}
			},
			async getMaterialList() {
				const res = await queryMaterialListAPI(this.query.containerCode)
				if (res.code === 200) {
					this.query.rackCode = res.data.rackCode
					this.materialList = res.data.countItems
					this.checkingCode = res.data.checkingCode
				}
			},
			// 解析额外信息
			extraInfo() {
				if (this.materialList.length === 0) {
					this.query.materialCode = ''
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请先扫描容器码'
					})
				}
				if (!this.query.materialCode.includes('*')) {
					this.query.materialCode = ''
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描正确的物料二维码'
					})
				}
				const array = this.query.materialCode.split('*')
				if (array.length !== 6) {
					this.query.materialCode = ''
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描正确的物料二维码'
					})
				}
				// 物料码 批次 日期 供应商 数量 realId
				this.scanMaterial = {
					materialCode: array[0],
					materialBatch: array[1],
					date: array[2],
					supplier: array[3],
					materialQty: Number(array[4]),
					realId: array[5]
				}
				// console.log(this.scanMaterial)
				this.query.materialCode = ''
				const findItem = this.materialList.findIndex(item => {
					return item.lot === this.scanMaterial.materialBatch
				})
				// console.log(findItem)
				if (findItem !== -1) {
					this.materialList[findItem].checkingQty += this.scanMaterial.materialQty
					this.materialList[findItem].differenceQty += this.scanMaterial.materialQty
					// 盘点盘数 + 1
					this.materialList[findItem].checkingCount += 1
				}
			},
			async scanSubmit() {
				const submitForm = {
					containerCode: this.query.containerCode,
					countItems: this.materialList,
					rackCode: this.query.rackCode,
					checkingCode: this.checkingCode
				}
				console.log(submitForm)
				const res = await checkByContainerAPI(submitForm)
				if (res.code === 200) {
					this.reset()
					this.$refs.uToast.show({
						type: 'success',
						message: '盘点成功'
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async getListByRackCode() {
				// const res = await getListByRackCodeAPI(this.query.rackCode)
				// console.log(res)
			},
			async lightSubmit() {
				// 亮灯提交表单
				const submitForm = {
					rackCode: this.query.rackCode,
					materialList: this.materialList
				}
				// const res = await checkByContainerAPI(this.query.rackCode)
				// if (res.code === 200) {
				// 	this.reset()
				// 	this.$refs.uToast.show({
				// 		type: 'success',
				// 		message: '盘点成功'
				// 	})
				// } else {
				// 	return this.$refs.uToast.show({
				// 		type: 'warning',
				// 		message: res.message
				// 	})
				// }
			},
			reset() {
				this.query = {
					containerCode: '',
					rackCode: '',
					materialCode: ''
				}
				this.materialList = []
				this.scanMaterial = []
				this.checkingCode = ''
			}
		}
	}
</script>

<style lang="scss">
	.commonButton {
		width: 100%;
		display: flex;
		gap: 20rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 15rpx;
		justify-content: space-between;
		background-color: #fff;
	}
	
	.uni-card {
		margin: 0 !important;
	}
	.checkContainer {
		uni-view.u-input.u-border {
			margin: 0 !important;
			padding: 5rpx 10rpx !important;
			width: 150rpx !important;
		}
	}
</style>
